<template>
	<view class="order-detail-page">
		<!-- 导航栏 -->
		<uni-nav-bar 
			:fixed="true" 
			:status-bar="true" 
			title="订单详情" 
			left-icon="left" 
			background-color="#007AFF"
			color="#ffffff"
			:border="false"
			:shadow="false"
			@clickLeft="goBack">
		</uni-nav-bar>

		<!-- 导航栏下容器 -->
		<view class="nav-container">
			<view class="success-message">支付成功,请您前往指定门店消费</view>
			<view class="store-info">
				<uni-icons type="shop" size="20" color="#ffffff" class="store-icon"></uni-icons>
				<view class="store-details">
					<view class="store-name">伟业汽车美容店 (人民路店)</view>
					<view class="store-address">山阳区人民中路33号</view>
				</view>
				<view class="nav-icon-wrapper" @click="handleNavigation">
					<image src="/static/plane@2x.png" mode="aspectFit" class="nav-icon"></image>
				</view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<view class="content">

			<!-- 订单详情卡片 -->
			<view class="detail-card">
				<view class="card-title">订单详情</view>
				<view class="detail-item">
					<text class="item-label">车辆精洗</text>
					<text class="item-value">¥39.90</text>
				</view>
				<view class="detail-item">
					<text class="item-label">车辆附加费用</text>
					<text class="item-value">0</text>
				</view>
				<view class="divider"></view>
				<view class="detail-item">
					<text class="item-label">原价</text>
					<text class="item-value">¥59.90</text>
				</view>
				<view class="detail-item">
					<text class="item-label">店家优惠</text>
					<text class="item-value discount">- ¥20</text>
				</view>
				<view class="detail-item">
					<text class="item-label">优惠券</text>
					<text class="item-value discount">- ¥10</text>
				</view>
				<view class="divider"></view>
				<view class="detail-item payment-amount">
					<text class="item-label">支付金额</text>
					<text class="item-value payment">¥29.9</text>
				</view>
			</view>

			<!-- 订单信息卡片 -->
			<view class="info-card">
				<view class="card-title">订单信息</view>
				<view class="info-item">
					<text class="info-label">订单号:</text>
					<text class="info-value">121212112487878</text>
				</view>
				<view class="info-item">
					<text class="info-label">下单时间:</text>
					<text class="info-value">2023.03.13 17:40</text>
				</view>
				<view class="info-item">
					<text class="info-label">预约时间:</text>
					<text class="info-value">2023.03.18 13:40</text>
				</view>
				<view class="info-item">
					<text class="info-label">车辆:</text>
					<text class="info-value">奔驰FWE4/豫A98FHJ</text>
				</view>
				<view class="info-item">
					<text class="info-label">备注:</text>
					<text class="info-value"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const goBack = () => {
		uni.navigateBack()
	}

	const handleNavigation = () => {
		// 跳转到导航页面
		uni.navigateTo({
			url: '/pages/car-maintenance/map-marker'
		})
	}
</script>

<style lang="scss" scoped>
	.order-detail-page {
		min-height: 100vh;
		background-color: #F5F5F5;
	}

	.nav-container {
		background-color: #007AFF;
		width: 100%;
		height: 140px;
		padding: 10px 20px;
	}

	.content {
		padding: 15px 15px 20px;
		margin-top: -50px;
	}

	.success-message {
		font-size: 14px;
		color: #ffffff;
		margin-bottom: 15px;
	}

	.store-info {
		display: flex;
		align-items: flex-start;
		gap: 10px;
	}

	.store-icon {
		margin-top: 2px;
		flex-shrink: 0;
	}

	.store-details {
		flex: 1;
	}

	.store-name {
		font-size: 16px;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 5px;
	}

	.store-address {
		font-size: 14px;
		color: #ffffff;
	}

	.nav-icon-wrapper {
		flex-shrink: 0;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding-top: 25px;
		margin-right: 50px;
	}

	.nav-icon {
		width: 15px;
		height: 15px;
		display: block;
	}

	/* 订单详情卡片 */
	.detail-card {
		background-color: #ffffff;
		border-radius: 15px;
		padding: 20px;
		margin-bottom: 15px;
	}

	.card-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		margin-bottom: 15px;
		border-bottom: 1px solid #E5E5E5;
		padding-bottom: 10px;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
	}

	.item-label {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.item-value {
		font-size: 14px;
		color: #333333;
		font-weight: 500;
	}

	.item-value.discount {
		color: #FF3B30;
	}

	.item-value.payment {
		color: #34C759;
		font-size: 16px;
		font-weight: bold;
	}

	.payment-amount {
		margin-top: 5px;
	}

	.divider {
		height: 1px;
		background-color: #E5E5E5;
		margin: 5px 0;
	}

	/* 订单信息卡片 */
	.info-card {
		background-color: #ffffff;
		border-radius: 15px;
		padding: 20px;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 0;
	}

	.info-label {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.info-value {
		font-size: 14px;
		color: #333333;
		text-align: right;
	}
</style>

<style lang="scss">
	/* 全局样式，用于覆盖组件内部样式 */
	.uni-navbar__content {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar--border {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar__header {
		border-bottom: none !important;
		border: none !important;
	}
</style>

